import React, { useState } from "react";
import axios from "axios";
import { useAppDispatch } from "../../app/hooks";
import { setUser } from '../../features/user/userSlice'
import { useNavigate } from "react-router-dom";
import { message as antdMessage } from 'antd'
export const Login: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
	const dispatch = useAppDispatch()
	const navigate = useNavigate()
  const handleLogin = async () => {
    const resp = await axios.post("/api/login", { username, password });
    const { code, data, message } = resp.data;
    if (code === 200) {
      const { nickname, avator, token } = data;
			dispatch(setUser({ nickname, avator,  token, isLogin: true}));
			navigate(-1)
			antdMessage.success(message)
    } else {
			antdMessage.error(message)
    }
  };
  return (
    <div>
      <input
        type="text"
        onChange={(e) => setUsername(e.target.value)}
        value={username}
      />
			  <input
        type="text"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
      />
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};
